<template>
  <div>
    <ve-histogram :data="total"></ve-histogram>
  </div>
</template>
<script>
export default {
  props: ["id"],
  data() {
    return {
      answers: [],
      item: []
    };
  },
  computed: {
    total() {
      let rows = [];
      let res = {};
      let map = {};
      this.item.forEach(el => {
        res[el.id] = 0;
        map[el.item_name] = el.id;
        rows.push({ xname: el.item_name, yname: "" });
      });
      //  console.log(res)
      this.answers.forEach(el => {
        el.content.forEach(sel => {
          //  console.log(sel)
          res[sel.answer]++;
        });
      });
      console.log(res);
      rows.forEach(r => {
        //   console.log(r.xname)
        //   console.log(map[r.xname])
        r.yname = res[map[r.xname]];
      });
      return {
        columns: ["xname", "yname"],
        rows
      };
    }
  },
  created() {
    this.getpaper();
  },
  methods: {
    async getpaper() {
      const ret = await this.axios.get(`/papers/answer/${this.id}`);
      this.answers = ret.data.data.answers;
      this.item = JSON.parse(ret.data.data.item);
      //   console.log(this.answers)
      //   console.log(this.item);
    }
  }
};
</script>

